/* eslint-disable @typescript-eslint/no-explicit-any */

import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
} from "@ant-design/icons";
import { Card, Flex, Modal, Tag } from "antd";
import { useDispatch } from "react-redux";
import { manageServer, updIsStar } from "../server/manageServer";
import { useRequest } from "ahooks";
import { getInfoManage, manageType } from "../store/manage";
import { useNavigate } from "react-router";
const { confirm } = Modal;

function CardComponent(props: any) {
  const { v }: { v: manageType } = props;
  const dispatch = useDispatch();
  const push = useNavigate();
  const renderFlag = (_id: string, isStar?: boolean, isDeleted?: boolean) => {
    try {
      updIsStar(_id, isStar, isDeleted);
      run();
    } catch (e) {
      console.error(e);
    }
  };
  const renderIsDeleted = (
    _id: string,
    isDeleted: boolean,
    isStar: boolean
  ) => {
    confirm({
      title: "提示",
      content: "您确定要删除此问卷么?",
      icon: "",
      async onOk() {
        updIsStar(_id, isStar, isDeleted);
        run();
      },
      onCancel() {},
    });
  };
  const { run } = useRequest(manageServer, {
    manual: true,
    onSuccess(result) {
      const { data } = result;
      dispatch(getInfoManage(data)); // 存储到 redux store
    },
    onFinally() {},
  });

  return (
    <Card
      className="w-100% my-5"
      title={
        <div className="flex">
          {v.isStar ? <StarOutlined color="red" className="mr-2" /> : ""}
          <div className="c-blue font-400 ">{props.v.title}</div>
        </div>
      }
      extra={
        <Flex justify="space-between" align="center">
          <Flex justify="space-between" align="center">
            <Tag className="mr-4">{v.isPublished ? "已发布" : "未发布"}</Tag>
            <div className=" w-20">答卷:{v.answerCount}</div>
            <div className="mx-2">{v.createdAt}</div>
          </Flex>
        </Flex>
      }
    >
      <Flex justify="space-between" align="center">
        <Flex justify="space-between" align="center">
          <Tag
            style={{ cursor: "pointer" }}
            icon={<EditOutlined />}
            bordered={false}
            onClick={() => {
              push(`/question/edit/${v._id}`);
            }}
          >
            编辑问卷
          </Tag>
          <Tag
            style={{ cursor: "pointer" }}
            icon={<LineChartOutlined />}
            bordered={false}
            onClick={() => {
              push(`/question/stat/${v._id}`);
            }}
          >
            问卷统计
          </Tag>
        </Flex>
        <Flex justify="space-between" align="center">
          <Tag
            style={{ cursor: "pointer" }}
            icon={<StarOutlined />}
            bordered={false}
            onClick={() => {
              renderFlag(v._id, !v.isStar, v.isDeleted);
            }}
          >
            {v.isStar ? "取消标星" : "标星"}
          </Tag>
          <Tag
            style={{ cursor: "pointer" }}
            icon={<CopyOutlined />}
            bordered={false}
            onClick={() => {}}
          >
            复制
          </Tag>

          <Tag
            style={{ cursor: "pointer" }}
            icon={<DeleteOutlined />}
            bordered={false}
            onClick={() => {
              renderIsDeleted(v._id, !v.isDeleted, v.isStar);
            }}
          >
            {v.isDeleted ? "恢复" : "删除"}
          </Tag>
        </Flex>
      </Flex>
    </Card>
  );
}

export default CardComponent;
